<template>
  <div class="pie">
    <div class="bin">
      <div class="bin_title">合作企业统计</div>
      <div class="bin_item">
        <div class="bin_contnet" ref="bin"></div>
        <div class="bin_r">
          <div class="flex a-l-c">
            <div class="d1"></div>
            <div>
              <div class="bin_num">7</div>
              <div class="bin_nmae">供应商</div>
            </div>
          </div>

          <div class="flex a-l-c" style="margin-top: 10px">
            <div class="d2"></div>
            <div>
              <div class="bin_num">12</div>
              <div class="bin_nmae">供应商</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pie_r">
      <hc-home-title :title="'采购情况'" />
      <div class="lines" ref="lines"></div>
    </div>
  </div>
</template>

<script setup>
import hcHomeTitle from "@/components/hc-home/index.vue";
import { ref, onMounted, nextTick } from "vue";
import { linfn } from "./lines.js";
import { binfn } from "./bin";
const lines = ref();
const bin = ref();

nextTick(() => {
  linfn(lines.value, [10, 20, 50, 60, 70, 80, 100]);
  binfn(bin.value);
});
</script>

<style lang="less" scoped>
.lines {
  margin-top: 10px;
  max-height: 300px;
  height: 300px;
  overflow: hidden;
}

.bin_nmae {
  color: #666;
  font-size: 14px;
}

.bin_r {
  margin-left: 20px;
}

.bin_num {
  font-size: 24px;
  font-weight: bold;
}

.pie {
  margin-top: 15px;
  display: flex;
}

.bin {
  width: 445px;
  border-radius: 6px;
  height: 350px;
  background-color: #fff;
  margin-right: 15px;
}

.pie_r {
  padding: 10px 10px 0 15px;
  flex: 1;
  background-color: #fff;
  border-radius: 6px;
}

.bin_title {
  padding: 10px;
  font-weight: bold;
}

.bin_item {
  display: flex;
  align-items: center;
}

.bin_contnet {
  width: 280px;
  height: 280px;
  margin: 10px 0 0 20px;
}
</style>
